<template>
  <div>
    <a-input-search
      v-model='selectedDepUsers'
      placeholder='请选择'
      read-only
      @search='onSearchDepUser'>
      <a-button slot='enterButton' :disabled='disabled'>选择</a-button>
    </a-input-search>
    <j-select-user-by-dep-relationship-modal
      ref='selectModal'
      :modal-width='modalWidth'
      @ok='onSearchDepUserCallBack'>
    </j-select-user-by-dep-relationship-modal>
  </div>
</template>

<script>
import JSelectUserByDepRelationshipModal from "./modal/JSelectUserByDepRelationshipModal";

export default {
  name: 'JSelectUserByDepRelationship',
  components: {JSelectUserByDepRelationshipModal},
  props: {
    modalWidth: {
      type: Number,
      default: 1250,
      required: false
    },
    value: {
      type: String,
      required: false
    },
    triggerChange: {
      type: Boolean,
      required: false,
      default: false
    },
    disabled: {
      type: Boolean,
      required: false,
      default: false
    }
  },
  data() {
    return {
      selectedDepUsers: ''
    }
  },
  mounted() {
    this.selectedDepUsers = this.value
  },
  watch: {
    value(val) {
      this.selectedDepUsers = val ? val.split(',')[0] : '请选择'
    }
  },
  methods: {
    //通过组织机构筛选选择用户
    onSearchDepUser() {
      this.$refs.selectModal.showModal()
      // this.onSearchDepUserCallBack('')    //去掉每次进子页面清空选中人
    },
    onSearchDepUserCallBack(selectedDepUsers) {
      this.selectedDepUsers = selectedDepUsers
      if (this.triggerChange) {
        this.$emit('change', selectedDepUsers)
      } else {
        this.$emit('input', selectedDepUsers)
      }
    }
  }
}
</script>

<style scoped>

</style>